<script setup>
// 系统设置组件
</script>

<template>
  <div class="settings-container">
    <h1>系统设置</h1>
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="基本设置">
        <div class="setting-item">
          <div class="setting-label">网站标题</div>
          <el-input v-model="siteTitle" placeholder="输入网站标题" />
        </div>
        <div class="setting-item">
          <div class="setting-label">网站描述</div>
          <el-input v-model="siteDescription" type="textarea" placeholder="输入网站描述" />
        </div>
        <div class="setting-item">
          <div class="setting-label">网站Logo</div>
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button type="primary">上传Logo</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </template>
          </el-upload>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户设置">
        <div class="setting-item">
          <div class="setting-label">用户注册</div>
          <el-switch v-model="userRegistration" />
        </div>
        <div class="setting-item">
          <div class="setting-label">验证码设置</div>
          <el-select v-model="captchaType" placeholder="选择验证码类型" clearable>
            <el-option label="请选择" :value="undefined" />
            <el-option label="短信验证码" value="sms" />
            <el-option label="邮箱验证码" value="email" />
          </el-select>
        </div>
      </el-tab-pane>
      <el-tab-pane label="安全设置">
        <div class="setting-item">
          <div class="setting-label">密码强度</div>
          <el-radio-group v-model="passwordStrength">
            <el-radio label="低">低</el-radio>
            <el-radio label="中">中</el-radio>
            <el-radio label="高">高</el-radio>
          </el-radio-group>
        </div>
        <div class="setting-item">
          <div class="setting-label">登录尝试次数</div>
          <el-input-number v-model="loginAttempts" :min="1" :max="10" label="登录尝试次数" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="button-group">
      <el-button type="primary">保存设置</el-button>
      <el-button>取消</el-button>
    </div>
  </div>
</template>

<style scoped>
.settings-container {
  padding: 20px;
}

.setting-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.setting-label {
  width: 120px;
  font-weight: bold;
}

.button-group {
  margin-top: 30px;
  display: flex;
  gap: 10px;
}
</style>